<template>
  <Form ref="editForm" :model="editForm" :rules="ruleValidate" :label-width="120">
    <Form-item prop="year" :label="'年份:'">
      <DatePicker type="year" :value="editForm.year" transfer :clearable="false" @on-change="handleChange"></DatePicker>
    </Form-item>
    <Form-item prop="period" :label="'当前填报周期:'">
      <Cascader :data="data" v-model="editForm.period" transfer></Cascader>
    </Form-item>
    <Form-item :label="'当前填报周期:'">
      <div>{{ periodtag }}</div>
    </Form-item>
  </Form>
</template>

<script>
import formCenterApi from '@/api/formCenter.js'
export default {
  data() {
    return {
      loading: false,
      editForm: {
        year: new Date(),
        period: []
      },
      year: new Date().getFullYear(),
      ruleValidate: {
        period: [{ required: true, type: 'array', message: '请选择前填报周期', trigger: 'change' }],
        year: [{ required: true, type: 'date', message: '请选择年份', trigger: 'change' }]
      },
      data: [
        {
          value: '年度',
          label: '年度'
        },
        {
          value: '半年度',
          label: '半年度',
          children: [
            {
              value: '上半年',
              label: '上半年'
            },
            {
              value: '下半年',
              label: '下半年'
            }
          ]
        },
        {
          value: '季度',
          label: '季度',
          children: [
            {
              value: 'Q1',
              label: 'Q1'
            },
            {
              value: 'Q2',
              label: 'Q2'
            },
            {
              value: 'Q3',
              label: 'Q3'
            },
            {
              value: 'Q4',
              label: 'Q4'
            }
          ]
        },
        {
          value: '月度',
          label: '月度',
          children: [
            {
              value: '1月',
              label: '1月'
            },
            {
              value: '2月',
              label: '2月'
            },
            {
              value: '3月',
              label: '3月'
            },
            {
              value: '4月',
              label: '4月'
            },
            {
              value: '5月',
              label: '5月'
            },
            {
              value: '6月',
              label: '6月'
            },
            {
              value: '7月',
              label: '7月'
            },
            {
              value: '8月',
              label: '8月'
            },
            {
              value: '9月',
              label: '9月'
            },
            {
              value: '10月',
              label: '10月'
            },
            {
              value: '11月',
              label: '11月'
            },
            {
              value: '12月',
              label: '12月'
            }
          ]
        }
      ]
    }
  },
  computed: {
    periodtag() {
      if (this.editForm.period.length < 2) {
        return this.year
      }
      return this.year + '-' + this.editForm.period[1]
    }
  },
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    removeOption(index) {
      this.options.splice(index, 1)
    },
    handleChange(date) {
      this.year = date
    }
  },
  created() {
    this.$emit('SetTitle', '发起填报')
    this.$emit('SetPageActions', [
      {
        text: '取消',
        handle: () => {
          this.$emit('Close')
        }
      },
      {
        text: '确定',
        theme: 'primary',
        loading: this.loading,
        handle: () => {
          if (this.loading) {
            this.$Message.warning({
              content: '正在发起填报,请稍等...',
              duration: 2
            })
            return
          }
          this.$refs['editForm'].validate(valid => {
            if (valid) {
              this.loading = true
              formCenterApi
                .formReport({ id: this.row.id, period: this.periodtag })
                .then(res => {
                  this.loading = false
                  if (res.data.code === 200) {
                    this.$Message.success({
                      content: '发起填报成功',
                      duration: 2
                    })
                    this.$emit('Close', this.editForm)
                  } else {
                    this.$Message.error({
                      content: '发起填报失败',
                      duration: 2
                    })
                  }
                })
                .catch(err => {
                  console.error(err)
                  this.loading = false
                })
            }
          })
        }
      }
    ])
    // this.$emit('SetPageHeight', 300)
    this.$emit('SetPageWidth', 400)
  }
}
</script>

<style lang="scss" scoped></style>
